<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        td {
            border: 1px solid #000;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        
    </style>

</head>

<body>
    <main id="app" v-if='isShow'>
        <first-com ></first-com>
    </main>
    <script id="first" type="text/html">
        <div>
            <table>
                
            <tr v-for='(goods,index) in goodsList'>
                <td>{{goods.goodsName}}</td>
                <td>{{goods.goodsPrice}}</td>
                <td>
                    <button @click='jianClick(index)'>-</button>
                    {{goods.goodsNum}}
                    <button @click='jiaClick(index)'>+</button>
                </td>
                <td>
                    <button @click='remove(index)'>移除</button>
                </td>
            </tr>
        </table>
        <br><br>
        <input type="text"  v-model='people'>
        <input type="text" v-model='address'>
        <section>
           <h1>清单</h1>
           <h3>商品总价:20</h3>
           <h3> 收件人：<h4 v-text='people'></h4></h3>
           <h3>收货地址：<h4 v-text='address'></h4></h3>
        
        </section>
    </div>
    </script>
    <script>
        Vue.component('first-com', {
            props:['allprice'],
            template: "#first",
            data: function () {
                return {
                    goodsList: [
                        {
                            goodsName: '辣条',
                            goodsPrice: 1,
                            goodsNum: 5,
                        }, {
                            goodsName: '泡椒鸡爪',
                            goodsPrice: 1.5,
                            goodsNum: 5,
                        }, {
                            goodsName: '巧克力',
                            goodsPrice: 3,
                            goodsNum: 5,
                        }
                    ],
                    people: '张三',
                    address: '北京',

                }
            },
            methods: {
                // 删除
                remove: function (index) {
                    this.goodsList.splice(index, 1)
                    if(this.goodsList.length ==0){
                        vue.isShow=false
                        var p =document.createElement('p')
                        p.innerHTML='<h1>请先加入购物车</h1>'
                        document.body.appendChild(p)

                    }
                },
                // 减
                jianClick:function(index){
                    if(this.goodsList[index].goodsNum>0){
                        this.goodsList[index].goodsNum--
                    }
                },
                // 加
                jiaClick:function(index){
                    if(this.goodsList[index].goodsNum<10){
                        this.goodsList[index].goodsNum++
                    }
                }

            },

        })
        var vue = new Vue({
            el: "#app",
            data: {
                isShow:true,
                price:'',
                // allPrice:this.goodsList[0].goodsNum*1+this.goodsList[1].goodsNum*1.5+this.goodsList[2]*3,
            },
        })

    </script>
</body>

</html>